<template>
    <div class="img-box">
      <el-image
          class="img"

          :src="imgUrl"
          fit="fill"></el-image>
    </div>
</template>

<script>
export default {
  name: "chat-user",
  props: ["imgUrl"],
  data() {
    return {
      user : localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")): {},
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {

  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>
.img-box{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  .img{
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: white;
    position: relative;
  }
  &::before{
    content: '';
    width: 20px;
    height: 20px;
    z-index: 1;
    border-radius: 50%;
    display: block;
    background-color: rgb(144, 225, 80);
    position: absolute;
    top: 1%;
    right: 10%;
  }
}

</style>